/*
 * 水文站信息 弹框
 * @ 劳兆城
 * @ 2017-08-23
 */

<template>
	<interact-model ref="interact-model" title="水文站信息" class="hydrology-model">
		<div class="hydrology-warpper">
			<div class="hydrology-tabs">
				<Tabs type="card" v-model="activeTab" :animated="false" @on-click="tabsClick">
					<TabPane label="基础信息" name="info"></TabPane>
					<TabPane label="水位趋势图" name="echart"></TabPane>
				</Tabs>
			</div>

			<div class="hydrology-content">
				<div class="hydrology-table" v-show="activeTab === 'info'">
					<table class="table" border>
						<tbody>
							<tr>
								<td>站码</td>
								<td>{{fliterData('stn_no')}}</td>
								<td>站点类型</td>
								<td>{{fliterData('stn_type')}}</td>
							</tr>
							<tr>
								<td>站点名称</td>
								<td>{{fliterData('stn_name')}}</td>
								<td>站点标签</td>
								<td>{{fliterData('data_tag')}}</td>
							</tr>
							<tr>
								<td>行政区域</td>
								<td>{{fliterData('region')}}</td>
								<td>行政区划代码</td>
								<td>{{fliterData('region_code')}}</td>
							</tr>
							<tr>
								<td>站点地址</td>
								<td>{{fliterData('location')}}</td>
								<td>所属河流名称</td>
								<td>{{fliterData('river')}}</td>
							</tr>
							<tr>
								<td>流域</td>
								<td>{{fliterData('basin')}}</td>
								<td>水系</td>
								<td>{{fliterData('hydr_net')}}</td>
							</tr>
							<tr>
								<td>站点状态</td>
								<td>{{fliterStatus('stn_status')}}</td>
								<td>备注</td>
								<td>{{fliterData('remark')}}</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div class="hydrology-echarts" v-show="activeTab === 'echart'">
					<div class="hydrology-nodata" v-show="!showEchart"></div>
					<div class="hydrology-echart" v-show="showEchart" ref="echart"></div>
				</div>
			</div>

			<loading v-show="showLoading"></loading>
		</div>
	</interact-model>
</template>

<script>
	import {
		loadingMixin,
		interactModelMixin,
		aPictureModelMixin
	} from 'common/js/mixins'
import { wateringLogging } from 'common/js/echart'
import { ERR_OK } from 'api/config'
import { getWaterloggingInfo } from 'api/aPicture'

export default {
		mixins: [
			loadingMixin,
			interactModelMixin,
			aPictureModelMixin
		],
		created () {
			this.echart = null
	},
		data () {
			return {
				activeTab: 'info',
				showLoading: false,
				showEchart: false
			}
		},
		methods: {
			tabsClick (name) {
				if (!this.echart) {
					return
			}

				if (name === 'echart') {
					this.$nextTick(() => {
						this.echart.resize()
				})
				}
			},
			initEchart (data) {
				if (!data) {
					return
				}
				this.showEchart = true
			setTimeout(() => {
					if (!this.echart) {
						this.echart = echarts.init(this.$refs.echart)
				}

					this.echart.setOption(new wateringLogging(data).echartData)
			}, 20)
			},
			show (feature, layerNames) {
				this.activeTab = 'info'
			this.showEchart = false
			this.$refs['interact-model'].showModel()
			if (layerNames) {
					this._getInfo(feature.get('content').info)
			} else {
					this._getInfo(feature.get('content'))
			}
			},
			_getInfo (realInfo) {
				this.data = realInfo
			this.showLoading = true
			getWaterloggingInfo(this.data.stn_no).then(res => {
					let data = null
				if (res.code === ERR_OK && res.result.data.length) {
						let info = res.result.data.reverse()
					Object.assign(this.data, {
							outerriver: info[0].water_river_out,
							innerriver: info[0].water_river_in,
							outerrivertrend: info[0].outertrend,
							innerrivertrend: info[0].innertrend,
							pumpstatus: info[0].pumpstatus,
							hydrologystatus: info[0].hydrologystatus
						})

					let time = [],
							inner = [],
							outer = []
					info.map(item => {
							let str = item.data_time
						str = str.split(' ').join('\n')
						time.push(str)
						inner.push(item.water_level_in)
						outer.push(item.water_level)
					})
						data = {
							x: time,
							inner: inner,
							outer: outer
						}
				}
					this.initEchart(data)
					this.showLoading = false
			})
			}
		}
	}
</script>

<style lang="scss">
	.hydrology-model {
		width: 600px;
		height: 450px;
		.hydrology-warpper {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			.hydrology-tabs {
				position: absolute;
				left: 5px;
				right: 5px;
				top: 5px;
			}
			.hydrology-content {
				position: absolute;
				left: 5px;
				right: 5px;
				top: 40px;
				bottom: 5px;
				.hydrology-table {
					width: 100%;
					.table {
						width: 100%;
						font-size: 14px;
						border: 1px solid #ddd;
						td {
							padding: 5px;
						}
					}
				}
				.hydrology-echarts {
					width: 100%;
					height: 100%;
					margin: auto;
					overflow: hidden;
					.hydrology-echart {
						width: 100%;
						height: 100%;
					}
					.hydrology-nodata {
						width: 100%;
						height: 100%;
						text-align: center;
						background-image: url("../img/aPictureNoCount.png");
						background-position: center 35%;
						background-repeat: no-repeat;
					}
				}
			}
		}
	}
</style>
